<template>
  <div class="m-h-con">
    <header class="header">
      <div class="inner">
        <div class="title" @click="handH1">One.Music</div>
        <div class="nav">
          <span>推荐</span>
          <span>排行榜</span>
          <span>歌单</span>
          <span>
            <input type="text" placeholder="开始搜索" class="input" v-model="searchContent" @keydown.enter="start" />
          </span>
          <span>|</span>
          <span @click="login" v-if="!userInfo.profile">登录</span>
          <span class="nickname" v-else @click="exit"><img :src="userInfo.profile.avatarUrl + '?param=22y22'" />{{ userInfo.profile.nickname }}</span>
        </div>
      </div>
    </header>

    <el-dialog title="登录" v-model="MVisible" width="600px" center @close="close" :close-on-click-modal="false">
      <el-form :model="form" ref="form" style="width: 80%; margin: 0 auto" :rules="rules">
        <el-form-item label="用户名" label-width="80px" prop="uname">
          <el-input v-model.trim="form.uname" placeholder="请输入用户名" suffix-icon="el-icon-user-solid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="80px" prop="psw">
          <el-input v-model.trim="form.psw" placeholder="请输入秘密" type="password" suffix-icon="el-icon-lock" autocomplete="off" @keydown.enter="dialogOK"></el-input>
        </el-form-item>
      </el-form>

      <template class="dialog-footer" #footer>
        <span>
          <el-button @click="MVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="dialogOK" size="small">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { login } from '../../request/api'

import { search } from '../../request/api'

export default {
  data() {
    return {
      searchContent: '',
      searchContentContent: '',

      MVisible: false, //登录框
      form: {
        uname: '',
        psw: '',
      },
      rules: {
        uname: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { max: 30, message: '长度不能大于30个字符', trigger: 'blur' },
        ],
        psw: [
          { required: true, message: '请输入秘密', trigger: 'blur' },
          { max: 30, message: '长度不能大于30个字符', trigger: 'blur' },
        ],
      },
    }
  },

  computed: {
    ...mapState({
      userInfo: function (state) {
        return state.userInfo
      },
    }),
  },

  created() {
    this.id = this.$route.query.id
  },

  mounted() {
    this.initUserInfo()
  },

  methods: {
    ...mapActions(['setUserInfoAction']),

    handH1() {
      this.$router.push('/music')
    },

    //获取登录信息
    initUserInfo() {
      const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
      this.setUserInfoAction(userInfo)
    },

    //登录
    login() {
      this.MVisible = true
    },

    close() {},

    dialogOK() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const { uname, psw } = this.form

          login({ phone: uname, password: psw })
            .then(res => {
              if (res.code === 200) {
                const loginInfo = { uname, psw }
                localStorage.setItem('loginInfo', JSON.stringify(loginInfo))
                localStorage.setItem('userInfo', JSON.stringify(res))
                this.setUserInfoAction(res)
                this.$message.success('登录成功')
                this.MVisible = false
                return
              }

              if (res.code === 204) {
                return this.$message.success('密码错误')
              }

              this.$message.success('用户名或者密码错误')
            })
            .catch(fail => {
              this.$message.success('登录失败，请稍后重试')
            })
        }
      })
    },

    //退出登录
    exit() {
      localStorage.removeItem('userInfo')
      this.initUserInfo()
    },

    //开始检索
    start() {
      this.$router.push({ name: 'musicList', params: { type: 'search', id: this.searchContent } })
    },
  },
}
</script>

<style lang="less" scoped>
.header {
  background: #fff;
  width: 100%;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.15);
  height: 80px;

  .inner {
    width: 1200px;
    margin: 0 auto;

    input {
      background: none;
      outline: none;
      border: 1px solid #ccc;
    }

    display: flex;
    justify-content: space-between;

    line-height: 80px;
    font-size: 16px;

    .title {
      font-weight: 700;
      font-size: 22px;
      cursor: pointer;
    }

    .nav {
      span {
        margin: 0 10px;
        cursor: pointer;
      }

      .nickname {
        img {
          height: 20px;
          vertical-align: middle;
          margin: 0 5px;
        }
      }
    }

    .input {
      border: 1px solid #ccc;
      line-height: 2;
      border-radius: 10px;
      text-indent: 1em;
    }
  }
}
</style>
